<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="mb-10">
        <div class="toplineBox">
          <div class="toplineBox-left">
            <el-button type="primary" size="small" @click="tempDialogVisible = true,type = 'add'" class="ml-10">模板添加
            </el-button>
          </div>
          <p class="numberline toplineBox-right">总{{ page.total }}条</p>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c"
          >
            <el-table-column
              label="模板名称" prop="name">
            </el-table-column>
            <el-table-column
              label="创建时间" prop="create_time">
            </el-table-column>
            <!-- <el-table-column
              label="是否是实际工资">
              <template slot-scope="scope">
                {{ scope.is_money == 1 ? '是' : '否' }}
              </template>
            </el-table-column> -->
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="type = 'edit',ids = scope.row.id,tempDialogVisible = true"  plain>编辑</el-button>
                <el-button type="primary" size="small" @click="exportFn(scope.row.id,scope.row.name)" plain>导出</el-button>
                <el-button size="small" @click="detelFn(scope.row.id)" type="danger" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <tempEditOrAdd @refreshList="InitFn()" :type="type" :ids="ids" :visible.sync="tempDialogVisible"></tempEditOrAdd>
    <!-- <addWages :visible.sync="addvisible" @InitFn="InitFn"></addWages>
    <detailWages :visible.sync="detailvisible" :wagesDetail="wagesDetail"></detailWages> -->
  </div>
</template>
<script>
import {pagination, tableoption} from '@/utils/util.js'
import {
    wagesTempList,wagesTempDel
} from "@/api/admin/wages"
import tempEditOrAdd from './tempEditOrAdd.vue'
export default {
    data(){
        return{
            ids:'',
            type:'add',
            arryList:[],
            tempDialogVisible: false,
            // 设置table样式
            tableStyle: tableoption,
            // 设置table页面分页所需
            page: {
                pageindex: pagination.pageIndex,
                pagesize: pagination.pageSize,
                total: pagination.total
            },
        }
    },
    components:{tempEditOrAdd},
    created(){
        this.InitFn()
    },
    methods:{
         // 初始化
        InitFn() {
            wagesTempList({
                p: this.page.pageindex,
            }).then(res => {
                console.log('res', res)
                this.arryList = res.list.data
                this.page.total = res.list.total
            })
        },
        handleSizeChange (val) {
          this.page.pageindex = val
          this.InitFn()
        },
        // 删除模板
        detelFn(id){
          wagesTempDel({id}).then(res=>{
              console.log(res,'del')
              if(res.code === 0){
                this.$message.success('删除成功！')
              }else{
                this.$message.error('删除失败！')
              }
              this.InitFn()
          })
        },
        // 模板导出
        exportFn(id,name){
          // this.editForm
          this.$http({
            method: 'get',
            url: `${this.$BASE_URL}/` + this.api.wagesExport + '?id=' + id,
            responseType: 'arraybuffer'
          })
            .then(
              function (response) {
                let filename = name + '-工资模板.xlsx'
                this.fileDownload(response.data, filename)
              }.bind(this)
            )
            .catch(
              function (error) {
                alert('网络请求出错')
              }
            )
        },
        fileDownload (data, fileName) {
          let blob = new Blob([data], {
            type: 'application/octet-stream'
          })
          let filename = fileName || 'filename.xls'
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(blob, filename)
          } else {
            let blobURL = window.URL.createObjectURL(blob)
            let tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = blobURL
            tempLink.setAttribute('download', filename)
            if (typeof tempLink.download === 'undefined') {
              tempLink.setAttribute('target', '_blank')
            }
            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
            window.URL.revokeObjectURL(blobURL)
          }
        }
    }
}
</script>
<style scoped>

</style>